<template>
  <main>
    <Row>
      <left-module 
        :blogList="blogList"
        :totalBlog="totalBlog"
        :currentPage="currentPage"
        :pageSize="pageSize"
        @changePage="changePage"
      ></left-module>
      <right-module></right-module>
    </Row>
  </main>
</template>

<script>
import { findSearchBlogList } from 'service'

export default {
  name: 'Search',
  data() {
    return {
      totalBlog: 0,
      currentPage: +this.$route.query.page || 1,
      pageSize: 12,
      blogList: [],
      keyword: '',
      flag: true
    }
  },
  created () {
    this.getSearch()
  },
  methods: {
    async getSearch() {
      this.keyword = this.$route.params['keyword']
      let res = await findSearchBlogList(this.currentPage, this.pageSize, this.keyword)
      res.data.data.list.forEach(item => {
        // 去除关于和友链
        if(item.id != 1 && item.id != 2) {
          this.blogList.push(item)
        }
      })
      this.totalBlog = res.data.data.list.length
      document.title = `${this.keyword} 的搜索结果`
    },
    async changePage(currentPage) {
      this.currentPage = currentPage
      await this.getSearch()
      this.flag = false
      let query = currentPage === 1 ? {} : { page: currentPage }
      this.$router.push({ name: 'search', query: query })
    }
  },
  watch: {
    $route(to, from) {
      if (this.flag && to.name === 'search') {
        this.currentPage = +to.query.page || 1
        this.getSearch()
      }
      this.flag = true
    }
  },
  components: {
    "left-module": () => import("components/homePage/LeftModule"),
    "right-module": () => import("components/homePage/RightModule")
  }
}
</script>

<style lang="scss" scoped>
</style>